<!--
 * @Description: 注册页
 * @Author: 晋龍
 * @Date: 2022-12-30 12:19:57
 * @LastEditors: 晋龍
 * @LastEditTime: 2023-02-12 18:44:59
-->
<template>
    <div class="register">
        <!-- logo -->
        <div class="logo">
            <var-image class="login_logo" src="./image/logo.png" />
        </div>
        <!-- 注册 -->
        <div class="registerBox">
            <div class="registerText">注册</div>
            <!-- 表单 -->
            <var-form ref="form" :disabled="disabled" :readonly="readonly" scroll-to-error="start" class="registerForm">
                <var-space direction="column" :size="[14, 0]">

                    <!-- 姓名 -->
                    <div class="userForm">
                        <div class="userIcon">
                            <var-icon name="account-circle-outline" color="rgb(38,89,247)" size="25px" />
                        </div>
                        <div class="userName">
                            <var-input placeholder="请输入姓名" :rules="[v => !!v || '姓名不能为空']"
                                v-model="formData.username" />
                        </div>
                    </div>

                    <!-- 密码 -->
                    <div class="passwordForm">
                        <div class="passwordIcon">
                            <var-icon name="xml" color="rgb(38,89,247)" size="25px" />
                        </div>
                        <div class="password">
                            <var-input type="password" placeholder="请输入密码" :rules="[(v) => !!v || '密码不能为空']"
                                v-model="formData.password" />
                        </div>
                    </div>
                    <!-- 验证学生或教师 -->
                    <div class="requireForm">
                        <div class="requireIcon">
                            <var-icon name="card-account-details-outline" color="rgb(38,89,247)" size="25px"/>
                        </div>
                        <div class="require">
                            <var-radio-group v-model="formData.userType">
                                <var-radio :checked-value="0">教师</var-radio>
                                <var-radio :checked-value="1">学生</var-radio>
                              </var-radio-group>
                        </div>
                    </div>

                    <!-- 手机号 -->
                    <div class="phoneForm">
                        <div class="phoneIcon">
                            <var-icon name="phone-outline" color="rgb(38,89,247)" size="25px" />
                        </div>
                        <div class="phone">
                            <var-input placeholder="请输入手机号" :disabled="disPhone" 
                                :rules="[v => !!v || '手机号不能为空', v => v.length === 11 || '手机号输入错误']"
                                v-model="formData.phone" maxlength="11" />
                        </div>
                    </div>

                    <!-- 验证码 -->
                    <div class="codeForm">
                        <div class="codeIcon">
                            <var-icon name="message-processing-outline" color="rgb(38,89,247)" size="25px" />
                        </div>
                        <div class="code">
                            <var-input placeholder="请输入验证码" :rules="[v => v.length === 6 || '请输入正确的验证码']"
                                v-model="formData.code" />
                        </div>
                        <var-button :disabled="dis" text class="getCode" @click="getCode()" >
                            <span v-if="show">获取验证码</span>
                            <span v-else>{{ timeCount }}s后重试</span>
                        </var-button>
                    </div>

                    <!-- 注册按钮 -->
                    <div class="registerBtn">
                        <var-button type="primary" class="btn" @click="registerClick()">注册</var-button>
                    </div>

                    <!-- 跳转登录 -->
                    <div class="toLogin">
                        <span>已有账号，立即</span>
                        <span class="register" @click="loginClick()">登录</span>
                    </div>

                    <!-- 用户协议及隐私协议 -->
                    <var-checkbox-group :rules="[v => v.length > 0 || '您尚未仔细阅读并同意《用户协议》和《隐私协议》']"
                        v-model="formData.like">
                        <var-checkbox :checked-value="1" class="check">
                            <div class="agreementCheck">
                                <div class="agreement">已阅读并同意</div>
                                <div class="agreement1" @click="center = true">《用户协议》</div>
                                <div class="agreement">和</div>
                                <div class="agreement1" @click="center = true">《隐私协议》</div>
                            </div>
                        </var-checkbox>
                        <!-- 内容 -->
                        <var-popup class="popup" v-model:show="center">
                            <div class="popup-example-block">
                                <div class="title">使用协议与隐私政策</div>
                                <div class="content">
                                    <div>欢迎来到云课堂。</div>
                                    <div class="text">
                                        <span
                                            class="first">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;为了更透明的呈现数字学院收集和使用您的个人信息的情况，数字学院根据业务实际情况更新了</span>
                                        <span class="info">《数字学院平台服务协议》</span>
                                        <span>、</span>
                                        <span class="info">《数字学院隐私协议》</span>
                                        <span>，特向您推送本提示。</span>
                                        <div>请您仔细阅读并充分理解相关条款、如您同意本隐私政策内容，请点击“同意”开始使用我们的产品服务。</div>
                                        <div>在仅浏览模式下，我们可能会申请系统设备收集设备信息、日志信息、用于信息推送和安全风控、并申请存储权限、用于下载及缓存相关文件。</div>
                                    </div>

                                </div>
                                <div class="agree">
                                    <var-button type="primary" class="agreeBtn" @click="agreeClick">同意</var-button>
                                </div>
                                <div class="scan">
                                    <var-button text outline type="primary" class="scanBtn"
                                        @click="scanClick">仅浏览</var-button>
                                </div>
                                <div class="disagree" @click="disagreeClick">不同意，退出</div>
                            </div>
                        </var-popup>
                    </var-checkbox-group>
                </var-space>
            </var-form>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { reactive, ref } from 'vue'
import { Snackbar } from '@varlet/ui'
import router from '@/router';
import { storeToRefs } from 'pinia';
import { useUserStore } from '../../stores/user';
const user  = useUserStore();

const formData = reactive({
    username: '',
    password: '',
    phone: '',
    code: '',
    like: [],
    userType:'',
})
const form = ref(null)
const center = ref(false)
const disabled = ref(false)
const readonly = ref(false)
const value = ref('')
const disPhone = ref(false)
// 验证码
const show = ref(true)
const timeCount = ref(60)
const dis = ref(false)
const countDown = ref()
// 同意勾选
const agreeClick = () => {
    center.value = false
}
// 仅浏览
const scanClick = () => {
    center.value = false
}
// 不同意勾选 
const disagreeClick = () => {
    center.value = false
}
// 获取验证码 倒计时
const getCode = () => {
    let m = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(formData.phone)
    if (!formData.phone) {
        setTimeout(() => {
            Snackbar.error("手机号不能为空")
        }, 200)
    } else if (formData.phone.length !== 11) {
        setTimeout(() => {
            Snackbar.error("手机格式错误，请重新输入")
        }, 200)
    } else if (m) {    
        countDown.value = setInterval(() => {
            setTimeout(() => {
                if (timeCount.value > 0 && timeCount.value <= 60) {
                    show.value = false
                    dis.value = true
                    disPhone.value = true
                    timeCount.value--
                } else {
                    show.value = true
                    dis.value = false
                    disPhone.value = false
                    timeCount.value = 60
                    clearInterval(countDown.value)
                }
            }, 0)
        }, 1000)
    } else if (!m) {
        setTimeout(() => {
            Snackbar.error("手机格式错误，请重新输入")
        }, 200)
    }
}

// 跳转登录
const loginClick = () => {
    router.push('/login')
}

// 点击注册
const registerClick =() => {
    if (formData.like[0] === 1) {
        if (formData.username === "") {
            setTimeout(() => {
                Snackbar.warning("请输入姓名")
            })
        } else if (formData.password === "") {
            setTimeout(() => {
                Snackbar.warning("请输入密码")
            })
        } else if (formData.phone === ""){
            setTimeout(() => {
                Snackbar.warning("请输入手机号")
            })
        }else if (formData.code === ""){
            setTimeout(() => {
                Snackbar.warning("请输入验证码")
            })
        } else if(formData.userType === ""){
            setTimeout(() => {
                Snackbar.warning("请选择用户类型")
            })
        } else {
            let mobileNumber = formData.phone;
            let password = formData.password;
            let name = formData.username;
            let userType = formData.userType;
            user.registerCheck(mobileNumber, password,name,userType).then(res =>{
                if(res.data.code = 20000){
                    setTimeout(() => {
                    Snackbar.success("注册成功")
                    router.push('/login')
                }, 1000)
                }else{
                    setTimeout(()=>{
                    Snackbar.error(res.data.message)
                })
                }
            }).catch((err)=>{
                setTimeout(()=>{
                    Snackbar.error(err.data.message)
                })
            })
        }
    } else {
        setTimeout(() => {
            Snackbar.error("请阅读并同意协议")
        }, 200)
    }
}
</script>

<style lang="less" scoped>
.register {
    position: relative;

    .logo {
        width: 60%;
        padding-top: 30%;

        .login_logo {
            margin-left: 15%;
            width: 100%;
        }
    }

    .registerText {
        padding-top: 20%;
        font-size: 24px;
        font-weight: bolder;
        margin-left: 10%;
    }

    .registerForm {
        margin: 10% 10% 0 10%;

        /* 姓名 */
        .userForm {

            .userIcon {
                position: absolute;
                margin-top: 20px;
                display: inline-block;
                margin-right: 20px;
                margin-bottom: 10px;
            }

            .userName {
                margin-left: 45px;
                display: inline-block;
                width: 240px;
            }
        }

        /* 密码 */
        .passwordForm {
            width: 100%;

            .passwordIcon {
                position: absolute;
                margin-top: 20px;
                display: inline-block;

            }

            .password {
                margin-left: 45px;
                display: inline-block;
                width: 240px;
            }
        }
        /* 验证学生或教师 */
        .requireForm{
            width: 100%;
            .requireIcon{
                position: absolute;
                margin-top: 15px;
                display: inline-block;

            }
            .require{
                margin-left: 45px;
                display: inline-block;
                width: 240px;
                margin-top: 10px;
            }
        }

        /* 手机号 */
        .phoneForm {
            width: 100%;

            .phoneIcon {
                position: absolute;
                margin-top: 20px;
                display: inline-block;

            }

            .phone {
                display: inline-block;
                margin-left: 45px;
                width: 240px;
            }
        }

        /* 验证码 */
        .codeForm {
            width: 100%;

            .codeIcon {
                position: absolute;
                margin-top: 20px;
                display: inline-block;
            }

            .code {
                margin-left: 45px;
                display: inline-block;
                width: 135px;
            }

            .getCode {
                color: rgb(38, 89, 247);
                display: inline-block;
                margin-left: 5px;
                line-height: center;
                position: absolute;
                margin-top: 12px;
                font-size: 16px;
            }
        }

        .registerBtn {
            margin-top: 10px;

            .btn {
                --button-border-radius: 25px;
                --button-normal-height: 45px;
                --button-normal-padding: 0 130px;
                --button-primary-color: rgb(38, 89, 247);
            }
        }

        .toLogin {
            text-align: center;
            font-size: 14px;
            color: rgb(188, 190, 204);
            font-weight: bolder;

            .register {
                color: rgb(38, 89, 247);
            }
        }

        .check {
            --checkbox-action-padding: 10px;
            --checkbox-icon-size: 16px;
            --checkbox-checked-color: rgb(38, 89, 247);

            .agreementCheck {
                align-items: center;
                display: inline-block;

                .agreement {
                    display: inline-block;
                    color: rgb(61, 61, 61);
                    font-size: 13px;
                }

                .agreement1 {
                    display: inline-block;
                    color: rgb(38, 89, 247);
                    font-size: 13px;
                }
            }
        }

        .popup {
            border-radius: 20px;

            .popup-example-block {
                padding: 20px 24px;
                height: 560px;
                width: 300px;

                .title {
                    font-size: 20px;
                    font-weight: bolder;
                    text-align: center;
                    margin-top: 20px;
                    margin-bottom: 20px;
                }

                .content {
                    margin-bottom: 20px;
                    font-size: 15px;
                    color: rgb(129, 129, 129);

                    .text {
                        .first {
                            text-indent: 2em;
                            margin: 0;
                            padding: 0;
                        }

                        .info {
                            color: rgb(38, 89, 247);
                        }
                    }
                }

                .agree {
                    text-align: center;
                    margin-bottom: 15px;

                    .agreeBtn {
                        font-weight: bolder;
                        --button-border-radius: 25px;
                        --button-normal-height: 45px;
                        --button-normal-padding: 0 100px;
                        --button-primary-color: rgb(38, 89, 247);
                    }
                }

                .scan {
                    text-align: center;
                    margin-bottom: 15px;

                    .scanBtn {
                        font-weight: bolder;
                        --button-border-radius: 25px;
                        --button-normal-height: 45px;
                        --button-normal-padding: 0 100px;
                        --button-primary-color: rgb(155, 158, 180);
                    }
                }

                .disagree {
                    font-weight: bolder;
                    text-align: center;
                    color: rgb(168, 172, 190);
                }
            }
        }

    }
}
</style>


